<template>
<view >
	<view class="content-list">
		<view class="recommend-item" v-for="(item, inx) in campusList" :key="inx">
			<view @click="seeDetails(item)">
				<view class="info-taskType">
					<view class="user-info">
						<image class="head" @click.stop="utils.userDetails(item.create_account_id||item.user_account_id)" :src="headHandle(item)" mode="aspectFill"></image>
						<view class="name-time">
							<text class="name">{{item.createName}}</text>
							<text class="time">{{item.update_time.split(' ')[0].split('-').join('.')}}</text>
						</view>
					</view>
					<view class="type-right">
						<view v-if="(tabIndex==2&&userAccountId==item.user_account_id) || (tabIndex==1&&userAccountId==item.recommend_account_id)" class="operation-module" tabindex="-1" @click.stop="clickOper(inx)" @blur="startHandle"> 
							<uni-icons type="more-filled" color="#9FA0A0" size="46rpx"></uni-icons>
							<text v-show="deleteIndex==inx" class="del-recommend" @click.stop="delTask(item, inx)">删除</text>
						</view>
						
						<text class="task-type" v-if="item.activity_id">来自特色活动的任务</text>
						<text class="task-type" v-else-if="item.task_type">来自{{item.createName}}的{{item.task_type==1?'基础任务':item.task_type==2?'劳动任务':item.task_type==3?'职业体验任务':item.task_type==4?'重要他人任务':'乐学园'}}</text>
					</view>
					
				</view>
				
				<view class="content">
					<text v-if="item.activity_id">{{item.content}}</text>
					<text-editor v-else :id-name="`editorList${inx}`" :read-only="true" 
								:info="{content: item.content, height: 'auto', className: 'ql-container-list'}"></text-editor>
				</view>
				<view class="activity-info" v-if="item.activity_id&&item.activity">
					<view class="ac-title">
						<text>{{item.activity.title}}</text>
					</view>
					<view class="see" @click.stop="activeDetails(item.activity, item.user_account_id)">
						<text>查看详情</text>
						<uni-icons type="right" size="28rpx" color="#999999"></uni-icons>
					</view>
				</view>
				<view v-else-if="item.activity_id" class="activity-info">活动已删除</view>	
				<view class="video-box" v-if="item.video_list&&item.video_list.length>0">
					<zy-video 
						:ref="'videoRef'+inx"
						:refi="'videoRef'+inx"
						:width="utils.getpx(686)"
						:height="utils.getpx(386)"
						:src="item.video_list[0]"></zy-video>
				</view>
				<view class="images-box" v-else>
					<image class="img" v-for="(path, i) in item.dst_imgs" :key="i" :src="path" mode="aspectFill"></image>
				</view>
			</view>
			<view class="like-comment">
				<view class="item" @click.stop="likeCampusShare(item)">
					<image :src="`/static/${item.selfLike?'likes1':'likes'}.png`" mode="aspectFill"></image>
					<text>{{item.likeNum>0?item.likeNum:'点赞'}}</text>
				</view>
				<view class="item" @click.stop="seeDetails(item)">
					<image src="/static/com.png" mode="aspectFill"></image>
					<text>{{item.commentNum>0?item.commentNum:'评论'}}</text>
				</view>
				<view class="item" @click.stop="share(item)">
					<image src="/static/share.png" mode="aspectFill"></image>
					<text>{{item.forward_num>0?item.forward_num:'分享'}}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="load_more" color="#BFBFBF"></uni-load-more>
	</view>
</view>
</template>
<script>

import textEditor from '../student/components/text-editor.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	components: {
		textEditor,
		uniLoadMore
	},
	props: {
		onShow: { // 监听页面执行onShow
			type: Number,
			default: 0
		},
		activeTab: {
			type: Number,
			default: 0
		},
		onReachBottom: { // 监听页面执行触发最底部
			type: Number,
			default: 0
		},
		downRefresh: { // 监听页面上拉
			type: Number,
			default: 0
		},
		accountId: { // 用户ID
			type: String,
			default: ''
		},
		isMy: {
			type: Boolean,
			default: false
		}
    },
    data() {
        return {
			tabIndex: 1, // 1.内容推荐  2.新鲜事
			taskTypeValue: '',
			originalList: [],
			recommendList: [],
			campusList: [],
			deleteIndex: -1, // 当前选择删除的下标
			load_more: 'more',
			campusPage: 1,

			evaluation_all: false,
			
			selectShareId: '',
			commentContent: '',
			eva_focus: false,
			replyName: '写点什么鼓励一下吧',
			currentEval: {},
			showEmoji: false,
			replyId: '',
			replyTopId: '',
			
			commentList: [],
			commPage: 1,

			com_load_more: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: ' ',
				contentnomore: '没有更多啦~'
			},
			totalCommentRow: 0,
			showBg: false,
			likeLoading: false,
			campusMoral: [],
			campusOriginal: [],
			TeacherRecommend: [],
			allMembers: {},
			userAccountId: ''
		} 
	},
	watch: {
		onShow(val){
			this.changeTab(this.tabIndex)
		},
		activeTab(val){
			this.changeTab(val)
		},
		onReachBottom(val){
			if(this.load_more == 'no-more') return;
			this.campusPage++;
			this.moreData(this.tabIndex)
		},
		downRefresh(val){
			this.changeTab(this.tabIndex)
		}
	},
	mounted() {
		this.changeTab(this.activeTab)
		this.allMembers = uni.getStorageSync('allFindMembers')||[]
		let info = uni.getStorageSync('tokenObj')
		this.userAccountId = info?info.accountId : ''
		
	},
	methods: {
		headHandle(info){
			// 处理头像显示
			let accountId = info.create_account_id|| info.user_account_id
			let type = this.allMembers[accountId]?this.allMembers[accountId].userType:2
			info.avatarUrl = info.createPic
			info.userType = type
			return this.utils.headImage(info)
		},
		changeTab(id){
			this.deleteIndex = -1
			this.tabIndex = id
			this.taskTypeValue = id==1 ? 2 : 3
			this.campusPage = 1
			this.campusList.splice(0)
			this.setList()
			
			this.moreData(id)
		},
		startHandle(){
			this.deleteIndex = -1
		},
		clickOper(inx){
			this.deleteIndex = this.deleteIndex == inx ? -1 : inx
		},
		setList(){
			if(this.tabIndex==1){
				this.campusList = JSON.parse(JSON.stringify(this.recommendList.slice(0, this.campusPage*10)))
			}else{
				this.campusList = JSON.parse(JSON.stringify(this.originalList.slice(0, this.campusPage*10)))
			}
		},
		moreData(id){
			this.load_more = 'loading'
			if(this.campusPage==1){
				
				this.recommendList.splice(0)
				this.originalList.splice(0)
			}
			if(id == 1){
				this.getTeacherRecommend()
			}else if(id == 2){
				this.getOriginal()
			}
		},
		// 查询原创发布
		getOriginal(){
			this.api.get('share/findCampusOriginalByPage', {
				createAccountId: this.accountId,
				page: this.campusPage,
				limit: 10
			}).then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.campusOriginalPage.list
				if(list.length<10){
					this.load_more = 'no-more'
				}
				for(let i=0; i<list.length; i++){
					if(list[i].files.length>5){
						this.handleFilesShow(list[i].files, i, list)
					}else if(list[i].activity&&list[i].activity.files.length>5){
						this.utils.xiaodeShowFiles(list[i].activity.files, i, list, this)
					}
					
				}
				this.originalList = this.originalList.concat(list)
				this.setList()
				
			})
		},
		// 查询教师推荐
		getTeacherRecommend(){
			let params = {
				page: this.campusPage,
				limit: 10,
				recommendAccountId: !this.isMy?this.accountId:'',
			}
			if (this.accountId || this.isMy) {
				params.isMy = this.isMy
			}
			this.api.get('share/findCampusTeacherRecommendByPage', params).then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.campusTeacherRecommendPage.list
				if(list.length<10){
					this.load_more = 'no-more'
				}
				for(let i=0; i<list.length; i++){
					if(list[i].files.length>5){
						this.handleFilesShow(list[i].files, i, list)
					}
					
				}
				this.recommendList = this.recommendList.concat(list)
				this.setList()
			})
		},
		activeDetails(item, accountId){
			uni.navigateTo({
				url: `/pages/student/active-details?id=${item.id}&accountId=${accountId}&original=1`
			})
		},
		// 点赞分享
        likeCampusShare(item){
			if(this.likeLoading) return
			this.likeLoading = true
            let likeOrNot = item.selfLike?false:true;
            this.api.post('share/likeCampusShare', {
                shareId: item.id,
				shareType: this.taskTypeValue
            }).then(res=>{
				this.likeLoading = false
                if(res.data.state != 'ok')return;
                let num = item.likeNum;
                if(likeOrNot){
                    num += 1;
                }else{
                    num -= 1;
                }
                this.$set(item, 'likeNum', num)
                this.$set(item, 'selfLike', likeOrNot)
            })
        },
		seeDetails(item){
			//  1.德育课程 2.教师推荐 3.新鲜事
			uni.setStorageSync('recommend_details_info', item)
			let path = '/pages/recommend/details?type='+this.taskTypeValue
			if(item.activity_id){
				path += `&activity_id=${item.id}`
			}else{
				path += `&id=${item.id}`
			}
			uni.navigateTo({
				url: path
			})
		},
		share(item){
			// return
			let shareImg = item.imgFiles?item.imgFiles[0]:'/static/wdxy_fx.jpg'
			let path = '/pages/recommend/details?type='+this.taskTypeValue
			if(item.activity_id){
				path += `&activity_id=${item.id}`
			}else{
				path += `&id=${item.id}`
			}
			let cont = {img: shareImg, 
				icon: '/static/wdxy_icon.png',
				num: `${item.forward_num+1}人分享过`,
				text: item.content,
				path: path,
				from: '内容推荐',
				comeFrom: `来自@${item.createName}`,
				taskType: this.taskTypeValue,
				taskId: item.id
			}
			let msgInfo = {msgType: 6, content: JSON.stringify(cont)}
			uni.setStorageSync('xdrelayMsg', msgInfo)
			uni.navigateTo({
				url: '/pages/noticeInfo/recent-contacts'
			})
		},
		// 获取显示图片的链接
		handleFilesShow(list, index, dataList){
			this.utils.xiaodeShowFiles(list, index, dataList, this)

		},
		// 删除自己发布的内容
		delTask(item, inx){
			this.deleteIndex = -1 
			let fun = () => {
				let path = this.tabIndex == 1?'share/delCampusTeacherRecommend':'share/delCampusOriginal'
				this.api.post(path, {
					shareId: item.id
				}).then(res=>{
					if(res.data.state != 'ok') return;
					this.campusList.splice(inx, 1)
				})
			}
			this.utils.showModal('', '确认删除这条内容吗？', fun)
		}
	}
}
</script>
<style lang="less" scoped>
	.home-index{
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		background-color: #F9F9F9;
	}
	.content-list{
		// margin-top: -32rpx;
		overflow: hidden;
	}
	.recommend-item{
		margin-bottom: 20rpx;
		background-color: #fff;
		color: #333333;
		padding: 0 24rpx 32rpx;
	}
	.info-taskType{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.type-right{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	.task-type{
		font-size: 28rpx;
		color: #666666;
		
	}
	.operation-module{
		position: relative;
	}
	.del-recommend{
		position: absolute;
		background: #fff;
		padding: 16rpx 36rpx;
		border-radius: 16rpx;
		top: 40rpx;
		right: 0;
		white-space: nowrap;
		box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, 0.5);
	}
	.user-info{
		display: flex;
		.head{
			width: 88rpx;
			height: 88rpx;
			min-width: 88rpx;
			border-radius: 44rpx;
		}
	}
	.name-time{
		margin-left: 24rpx;
		.name{
			display: block;
			line-height: 44rpx;
			
		}
		.time{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.content{
		margin-top: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		white-space: pre-line;
	}
	// 活动
	.activity-info{
		margin-top: 32rpx;
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 32rpx;
		color: #999999;
	}
	.ac-title{
		color: #666666;
		line-height: 42rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: pre-line;
	}
	.images-box, .video-box{
		margin-top: 40rpx;
	}
	.images-box{
		
		image{
			width: 215rpx;
			height: 215rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	.like-comment{
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0;
		image{
			width: 44rpx;
			height: 44rpx;
			vertical-align: -12rpx;
		}
		text{
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}
</style>